<template>
  <div v-loading="vLoading" element-loading-text="拼命加载中">
    <div style="font-size: 45px;margin-bottom: 40px;margin: auto;">个人信息</div>
    <el-row>
      <el-col :span="12">
        <div style="margin:100px auto 50px;width: max-content;">
          <el-avatar :size="300" :src="require(`D:/staticFile/hr/headIconImg/${$store.state.headIcon}`)"></el-avatar>
        </div>

        <div style="text-align: center;">
          <el-upload ref="upload" class="upload-demo" :on-success="imagChange" :limit="1" :http-request="submitImg"
            action="" accept=".jpg,.jpeg,.png">
            <el-button plain type="info" style="margin-bottom: 30px;">修改头像</el-button>
          </el-upload>
          <el-button @click="reset()" plain>重 置</el-button>
          <el-button type="primary" plain @click="update()">修 改</el-button>
        </div>
      </el-col>
      <el-col :span="8"> <el-form ref="ruleForm" label-width="100px" :disabled="false"
          style="width: max-content;  margin: 50px auto;">
          <el-form-item label="hr姓名" style="width: 240px;">
            <el-input v-model="userData.hrName"></el-input>
          </el-form-item>
          <el-form-item label="账号" style="width: 240px;margin-left: 10px;">
            <el-input v-model="userData.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" style="width: 240px;margin-left: 40px;">
            <el-input v-model="userData.password"></el-input>
          </el-form-item>
          <el-form-item label="电话" style="width: 240px;margin-left: 70px;">
            <el-input v-model="userData.telephone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" style="width: 240px;margin-left: 40px;">
            <el-input v-model="userData.email"></el-input>
          </el-form-item>
          <el-form-item label="性别" style="width: 240px;margin-left: 10px;">
            <el-input v-model="userData.gender" maxlength="1"></el-input>
          </el-form-item>
          <el-form-item label="注册时间" style="width: 240px;">
            {{ userData.registerTime }}
          </el-form-item>
          <el-form-item label="vip" style="width: 500px;margin-left: 0px;" v-if="vipVisible">
              截止时间：{{ vipInfo.vipEndTime }}
              <el-button type="primary" plain size="mini" style="margin-left: 10px;" @click="vipDialogVisible=true">充值</el-button>
          </el-form-item>
          <el-form-item label="上传企业资质" style="width: 500px;margin-left: 70px;">
              <el-button type="primary" plain size="mini" style="margin-left: 10px;" @click="$router.push('/companyCheck')">上传</el-button>
          </el-form-item>

        </el-form>
      </el-col>
    </el-row>

    <el-dialog title="充值" :visible.sync="vipDialogVisible" width="50%">
            <el-table :data="vipGood"  border tooltip-effect="dark" style="width: 100%">
                    <el-table-column prop="vipDesc" label="效果"   show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="amount" label="价格" width="100" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column  label="数量" width="250" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <el-input-number v-model="scope.row.duration" @change="handleChange(scope.row.duration)" :min="1" :max="12"></el-input-number>
                      </template>
                       
                    </el-table-column>
                    <el-table-column  label="支付" width="100" show-overflow-tooltip>
                      <template slot-scope="scope">
                    <el-button type="primary" plain size="mini" style="margin-left: 10px;" @click="pay(scope.row)">支付</el-button>
                  </template>
                    </el-table-column>
              </el-table>
        </el-dialog>
  </div>
</template>

<script>
import { reviseUserImg } from '@/api/common';
import { checkLogin, getLoginInfo, hrCompanyCheckQuery, updateInfo } from '@/api/hr';
import { doPay, getVipGoods, getVipInfo } from '@/api/vip';

export default {
  data() {
    return {
      vLoading:false,
      userData: {
      },
      vipVisible: false,
      vipInfo:null,
      vipDialogVisible:false,
      vipGood:null,
      payInfo:{
        num:null,
        duration:null,
      }
    }
  },
  methods: {
    pay(item) {
      this.payInfo.num=item.amount
      this.vipDialogVisible = false;
      // 沙箱支付
      const routeData = this.$router.resolve({
        path: `pay/num/${this.payInfo.num}/duration/${this.payInfo.duration}`
      })
  // 在新标签页打开
     window.open(routeData.href, '_blank')
    },
    handleChange(num){
      this.payInfo.duration=num
    },
    reset() {
      window.location.reload()
    },
    update() {
      updateInfo(this.userData).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功")
          getLoginInfo().then(res => {
            if (res.code == 200) {
              this.$store.dispatch("setSelfInfo", res.data)
              console.log(this.$store.state.headIcon);
            }
            else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    imagChange(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
    },
    submitImg(options) {
      const formData = new FormData();
      formData.append("file", options.file)
      reviseUserImg(formData).then(res => {
        if (res.code == 200) {
          this.$refs.upload.clearFiles(); // 清空页面显示的文件列表
          this.$message({
            message: "更新头像成功",
            type: 'success'
          });
          getLoginInfo().then(res => {
            if (res.code == 200) {
              this.$store.dispatch("setSelfInfo", res.data)
              console.log(this.$store.state.headIcon);
            }
            else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error(res.msg);
        }
      })
    }
  },
  mounted() {
    this.vLoading=true
    getLoginInfo().then(res => {
      this.userData = res.data
    })
    hrCompanyCheckQuery().then(res => {
      console.log(res.data);
      
      if (res.data.companyId!=null) {
        getVipInfo({"companyId":this.$store.state.companyId}).then(response => {
          
          this.vipInfo=response.data
          this.vipVisible=true
          this.vLoading=false
          
        })
      }else{
        this.vLoading=false
      }
    })

    getVipGoods().then(res=>{
      this.vipGood=res.data
    })
  }

}
</script>

<style></style>